<script>
import {h, ref} from 'vue';
import {Collapse} from 'ant-design-vue';

const CollapsePanel = Collapse.Panel;

const ACTIVE_KEY = '1';

export default {
  name: 'SagPanel',
  props: {
    title: { type: String, default: null },
  },
  setup(props, ctx) {
    const activeKey = ref(ACTIVE_KEY);
    const { attrs, slots } = ctx;

    const onChange = () => {
      if (activeKey.value === ACTIVE_KEY) {
        activeKey.value = '';
      } else {
        activeKey.value = ACTIVE_KEY;
      }
    };
    return () =>
      h(
        Collapse,
        {
          ...attrs,
          activeKey: activeKey.value,
          expandIconPosition: 'right',
          onChange,
        },
        () => [
          h(
            CollapsePanel,
            {
              key: ACTIVE_KEY,
              header: props.title,
            },
            slots
          ),
        ]
      );
  },
};
</script>
